* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #72afd3, #96fbc4);
}
.login-box {
    position: relative;
    width: 320px;
}
.input-box {
    display: flex;
    flex-direction: column;
    input {
        height: 40px;
        border-radius: 3px;
        text-indent: 15px;
        outline: none;
        border: none;
        margin-bottom: 15px;
        &:focus {
            outline: 1px solid lightseagreen;
        }
    }
    button {
        border: none;
        height: 45px;
        background-color: lightseagreen;
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
    }
}

.owl {
    width: 211px;
    height: 108px;
    background: url('../../images/owl-login.png') no-repeat;
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    .hand {
        width: 34px;
        height: 34px;
        border-radius: 40px;
        background-color: #472d20;
        position: absolute;
        left: 12px;
        bottom: -8px;
        transform: scaleY(0.6);
        transition: 0.3s ease-out;
        &.hand-r {
            left: 170px;
        }
    }
    .arms {
        position: absolute;
        top: 58px;
        width: 100%;
        height: 41px;
        overflow: hidden;
        .arm {
            background: url('../../images/owl-login-arm.png') no-repeat;
            width: 40px;
            height: 65px;
            position: absolute;
            left: 20px;
            top: 40px;
            transform: rotate(-20deg);
            transition: 0.3s ease-out;
            &.arm-r {
                transform: rotate(20deg) scaleX(-1);
                left: 158px;
            }
        }
    }
}
.owl.password {
    .hand {
        transform: translateX(42px) translateY(-15px) scale(0.7);
    }
    .hand-r {
        transform: translateX(-42px) translateY(-15px) scale(0.7);
    }
    .arms .arm {
        transform: translateY(-40px) translateX(40px);
        &.arm-r {
            transform: translateY(-40px) translateX(-40px) scaleX(-1);
        }
    }
}